.mt1 {
    margin-top: 1px;
}

.mt24 {
    margin-top: 24upx;
}

.mr24 {
    margin-right: 24upx;
}

.ml24 {
    margin-left: 24upx;
}
.p24 {
	padding: 24upx;
}
.pt24 {
    padding-top: 24upx;
}

.pr24 {
    padding-right: 24upx;
}

.pb24 {
    padding-bottom: 24upx;
}

.pl24 {
    padding-left: 24upx;
}

.pt88 {
    padding-top: 88upx;
}

.mlr24 {
    margin-left: 24upx;
    margin-right: 24upx;
}

.ptb24 {
    padding-top: 24upx;
    padding-bottom: 24upx;
}

.plr24 {
    padding-left: 24upx;
    padding-right: 24upx;
}

@for $i from 1 through 30 {
	.mt#{$i*10}{
		margin-top: $i * 10upx;
	}
	.pt#{$i*10}{
		padding-top: $i * 10upx;
	}  
	.pb#{$i*10}{
		padding-bottom: $i * 10upx;
	}  
}

@for $i from 1 through 20 {
	.pl#{$i*10}{
		padding-left: $i * 10upx;
	} 
	.pr#{$i*10}{
		padding-right: $i * 10upx;
	}  
	.mb#{$i*10}{
		margin-bottom: $i * 10upx;
	}  
	.ml#{$i*10}{
		margin-left: $i * 10upx;
	}  
	.mr#{$i*10}{
		margin-right: $i * 10upx;
	}  
	.mlr#{$i*10}{
		margin-left: $i * 10upx;
		margin-right: $i * 10upx;
	}  
	.mtb#{$i*10}{
		margin-top: $i * 10upx;
		margin-bottom: $i * 10upx;
	}  
	.ptb#{$i*10}{
		padding-top: $i * 10upx;
		padding-bottom: $i * 10upx;
	}  
	.plr#{$i*10}{
		padding-left: $i * 10upx;
		padding-right: $i * 10upx;
	}
	.p#{$i*10}{
		padding:$i*10upx;
	}
}